<template>
  <router-view/>
  <!--    1.top导航-->
  <div style="margin-top: 30px;">
    <van-tabs color="#7F6B56" route>
      <!--      1.主页的推荐模块-->
      <van-tab disabled>
        <template #title>
          <van-icon name="medal-o" color="#ee0a24" size="27px"/>
        </template>
      </van-tab>
      <van-tab title="推荐">
        <div class="outer">
          <!--          1.2 8个标签-->
          <div style="margin-top: 20px">
            <van-grid square>
              <van-grid-item v-for="m in meuns" :key="m">
                <img class="sy-dh-imgs" :src="m.img" @click="appbtn(m.id)"/>
                <p>{{ m.name }}</p>
              </van-grid-item>
            </van-grid>
          </div>
          <!--          1.3 滚动图片-->
          <div class="two">
            <div class="two-left" style="background-color: #F4F3FD; border-radius: 10px">
              <div style="height: 20%;">
                <p style="margin-top: 10px;color:blueviolet;font-size: 16px">运动数据 </p>
              </div>
              <div style="height: 80%;background-color: #FDFDFD; border-radius: 30px">
                <div>
                  <br>
                  <label style="font-size: 18px;font-weight: bold;">{{ kalus }}&nbsp;卡路里</label>
                  <br><br>
                  <label style="color: blue">--&nbsp; </label>
                  <label>今日消耗</label>
                </div>
              </div>

            </div>
            <div class="two-images">
              <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                  <img class="sy-lb-tps" :src="image"/>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>
          <!--          1.4 活动推荐-->
          <div class="sy-tj-gd">
            <van-row>
              <van-col span="7" style="font-size: 20px;font-weight: bold;">活动推荐</van-col>
              <van-col span="10"></van-col>
              <van-col span="7">
                <van-button round to="/Camp">查看更多</van-button>
              </van-col>
            </van-row>
          </div>
          <!--          1.5 活动详情-->
          <div v-for="imgs in activitys" :key="imgs">
            <div class="sy-tj-hd">
              <div class="sy-tj-hd-tp">
                <img :src="imgs.imgurl" class="sy-tj-imgs">
              </div>
              <div class="sy-tj-hd-xq">
                <label style="font-size: 18px;font-weight: bold;">{{ imgs.title }}</label>
                <p>{{ imgs.sdate }}</p>
              </div>
            </div>
          </div>
          <!--          1.4 顶级教学-->
          <div class="sy-tj-gd">
            <van-row>
              <van-col span="7" style="font-size: 20px;font-weight: bold;">顶级大师教学</van-col>
              <van-col span="10"></van-col>
              <van-col span="7">
                <van-button round to="/Train">查看更多</van-button>
              </van-col>
            </van-row>
          </div>
          <!--          1.5 课程详情-->
          <div v-for="imgs in ActivityInfo" :key="imgs">
            <div class="sy-tj-hd">
              <div class="sy-tj-hd-tp">
                <img :src="imgs.img" class="sy-tj-imgs">
              </div>
              <div class="sy-tj-hd-xq">
                <label style="font-size: 18px;font-weight: bold;">{{ imgs.str }}</label>
                <p>{{ imgs.time }}</p>
              </div>
            </div>
          </div>
          <!--          1.6 课程推荐-->
          <div class="sy-tj-gd">
            <van-row>
              <van-col span="7" style="font-size: 20px;font-weight: bold;">燃脂课程</van-col>
              <van-col span="10"></van-col>
              <van-col span="7">
                <van-button round to="/Plan">查看更多</van-button>
              </van-col>
            </van-row>
          </div>
          <!--          1.7 课程详情-->
          <div v-for="imgs in losefatInfo" :key="imgs">
            <div class="sy-tj-hd" >
              <div class="sy-tj-hd-tp">
                <img :src="imgs.imgurl" class="sy-tj-imgs">
              </div>
              <div class="sy-tj-hd-xq">
                <label style="font-size: 18px;font-weight: bold;">{{ imgs.title }}</label>
                <p>{{ imgs.info }}</p>
              </div>
            </div>
          </div>
          <!--          1.8 商品推荐-->
          <div class="sy-tj-gd">
            <van-row>
              <van-col span="7" style="font-size: 20px;font-weight: bold;">商品推荐</van-col>
              <van-col span="10"></van-col>
              <van-col span="7">
                <van-button round to="/mall">查看更多</van-button>
              </van-col>
            </van-row>
          </div>
          <!--          1.9 商品详情-->
          <div class="sy-sp-xq">
            <div class="sp-lx" v-for="s in shop" :key="s">
              <img class="mal-gd-imgs" :src="s.img">
              <div>
                <label class="sp-tp-na">{{ s.name }}</label><br>
                <span style="color: #ee0a24;font-size: 9px">商品价格:{{ s.discount }}</span>
                <span
                    style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px;font-size: 9px">{{
                    s.price
                  }}</span><br>
                <span
                    style="color: orangered;font-size: 10px;margin-right: 40px;margin-top: 10px">商品销量:{{
                    s.sale
                  }}</span>
                <span style="color: #ee0a24">￥{{ s.discount }}</span>
                <span style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px">￥{{ s.price }}</span><br>
                <span style="color: orangered;font-size: 10px;margin-right: 40px">商品销量:{{ s.sale }}</span>
                <span style="color: lightslategrey;font-size: 10px">库存:{{ s.room }}</span>
              </div>
            </div>
          </div>
          <div class="sy-button"></div>
        </div>
      </van-tab>
      <!--      2. 主页的推荐模块-->
      <van-tab title="活动" to="/Camp"></van-tab>
      <van-tab to="/my">
        <template #title>
          <van-icon name="setting-o" color="#ee0a24" size="27px"/>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      kalus: 10000000,
      meuns: [
        {
          id: 1,
          name: "跑步",
          img: require("../assets/images/sy-log1.png")
        },
        {
          id: 2,
          name: "打卡",
          img: require("../assets/images/sy-log2.png")
        }, {
          id: 3,
          name: "训练",
          img: require("../assets/images/sy-log3.png")
        }, {
          id: 4,
          name: "瑜伽",
          img: require("../assets/images/sy-log4.png")
        },
        {
          id: 5,
          name: "社区",
          img: require("../assets/images/sy-log5.png")
        },
        {
          id: 6,
          name: "计划",
          img: require("../assets/images/sy-log6.png")
        }, {
          id: 7,
          name: "商城",
          img: require("../assets/images/sy-log7.png")
        }, {
          id: 8,
          name: "购物车",
          img: require("../assets/images/sy-log8.png")
        }
      ],
      losefatInfo:[{
        imgurl: "",
        title:"",
        info:""
      }
      ],
      activitys: [
          {
        title: "",
        sdate: "",
        imgurl: ""
      }
      ],
      //活动信息
      ActivityInfo: [
        {
          img: require("../assets/images/yd-hr-02.jpg"),
          str: "滑雪教学 | Keep珠穆朗玛峰滑雪大师Artist Run",
          time: "报名时间：07.03-07.22"
        },
        {
          img: require("../assets/images/yd-hr-03.jpg"),
          str: "游泳教学 | Keep男子100米速度 Time Run",
          time: "报名时间：06.03-06.30"
        },
        {
          img: require("../assets/images/yd-hr-04.jpg"),
          str: "冲浪教学 | Keep海上巨浪冲锋 Run Life",
          time: "报名时间：08.03-08.12"
        },
      ],

      //课程信息
      //商品信息
      shop:
          [
            {
              img: "",
              name: "",
              price: "",
              discount: "",
              sale: "",
              room: ""
            }],
      images: [
        require("../assets/images/yd-hr-02.jpg"),
        require("../assets/images/yd-hr-03.jpg"),
        require("../assets/images/yd-hr-04.jpg"),
        require("../assets/images/yd-hr-05.jpg")
      ],
      GoodsInfo: [],
      CourseInfo: []

    }
  }, mounted() {
    this.axios.get("/api/mall/mall.do?id=" + 2).then(r => {
      if (r.data.code == 200) {
        //console.log(r.data.data)
        this.shop = r.data.data;
      } else {
        this.$toast(r.data.msg);
      }
    }), this.axios.get("/api/paln/type.do?type="+1).then(r=>{
      if(r.data.code==200){
        this.losefatInfo=r.data.data;
        //console.log(this.losefatInfo);
      }
    }),
        this.axios.get("/api/activity/query.do?type=1").then(r => {
          if (r.data.code == 200) {
            //
            this.activitys = r.data.data;
          }else {
            this.$toast(r.data.msg);
          }
        })
  },
  methods: {
    appbtn(id) {
      if (id == 1) {
        this.$router.push("/Run")
      } else if (id == 2) {
        this.$router.push("/sign")
      } else if (id == 3) {
        this.$router.push("/Train")
      } else if (id == 4) {
        this.$router.push("/Yoga")
      } else if (id == 5) {
        this.$router.push("/community")
      } else if (id == 6) {
        this.$router.push("/Plan")
      } else if (id == 7) {
        this.$router.push("/mall")
      } else if (id == 8) {
        this.$router.push("/cart")
      }

    }

  }
}
</script>
<style scoped>
.sy-dh-imgs {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}

.two {
  height: 150px;
}

.two-left {
  width: 30%;
  height: 150px;
  float: left;
  margin-left: 4%;

}

.two-images {
  width: 62%;
  float: left;
  height: 150px;
  margin-left: 4%;

}

.sy-lb-tps {
  width: 90%;
  margin-right: 20px;
  height: 160px;
  border-radius: 20px;
}

.sy-tj-imgs {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  float: left;
}

.sy-tj-hd {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
  float: left;
  height: 140px;
}

.sy-tj-hd-tp {
  margin-top: 10px;
  width: 50%;
  height: 120px;
  float: left;
}

.sy-tj-hd-xq {
  margin-top: 10px;
  margin-left: 4%;
  width: 46%;
  height: 100px;
  float: left;
}

.sy-button {
  width: 100%;
  float: left;
  margin-bottom: 10%;
}

.sp-lx {
  width: 40%;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5%;
  margin-left: 5%;
  float: left;
}

.sp-tp-na {
  font-size: 12px;
  font-weight: bold;
}

.mal-gd-imgs {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.sy-sp-xq {
  width: 100%;
  float: left;

}

.sy-tj-gd {
  width: 100%;
  float: left;
  margin-top: 15px;
}
</style>
